<!--  -->
<article class="guide">
  <div class="container-fluid">

    <h2 class="vtop">Icons</h2>
    <div class="row">
      <div class="col-md-4">
        <p>A mostly UI-focused subset of Streamline icons.</p>
        <p>Use them inline for emoticon <span class="sl sl-star icon"/> powah!</p>
      </div>
      <div class="col-md-8">
        <p>Add sizing to qualify the love...
        </p>
        <p>
          <span class="nobreak sl sl-heart icon icon-sm"><code>icon-sm</code></span>
          <span class="nobreak sl sl-heart icon icon nobreak">&nbsp;<code>icon</code></span>
          <span class="nobreak sl sl-heart icon icon-2x"><code>icon-2x</code></span>
          <span class="nobreak sl sl-heart icon icon-3x"><code>icon-3x</code></span>
          <span class="nobreak sl sl-heart icon icon-4x"><code>icon-4x</code></span>
        </p>
      </div>
    </div>
    <hr />
    <h2 class="vtop">All Classes</h2>
    <div class="row">
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="nobreak sl sl-star icon">&nbsp;<code class="small">.sl-star</code></span>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="nobreak sl sl-bubble-comment icon">&nbsp;<code class="small">.sl-bubble-comment</code></span>
      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-user-circle icon nobreak">&nbsp;<code class="small">.sl-user-circle</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="nobreak sl sl-setting-gear icon">&nbsp;<code class="small">.sl-setting-gear</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-book icon nobreak">&nbsp;<code class="small">.sl-book</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-network icon nobreak">&nbsp;<code class="small">.sl-network</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-scale-reduce icon nobreak">&nbsp;<code class="small">.sl-scale-reduce</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-pin icon nobreak">&nbsp;<code class="small">.sl-pin</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-star-circle icon nobreak">&nbsp;<code class="small">.sl-star-circle</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-play icon nobreak">&nbsp;<code class="small">.sl-play</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-cloud icon nobreak">&nbsp;<code class="small">.sl-cloud</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-alert icon nobreak">&nbsp;<code class="small">.sl-alert</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-question-mark icon nobreak">&nbsp;<code class="small">.sl-question-mark</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-setting-adjustment icon nobreak">&nbsp;<code class="small">.sl-setting-adjustment</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-palette icon nobreak">&nbsp;<code class="small">.sl-palette</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-business-chart icon nobreak">&nbsp;<code class="small">.sl-business-chart</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-scale-spread icon nobreak">&nbsp;<code class="small">.sl-scale-spread</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-cloud-download icon nobreak">&nbsp;<code class="small">.sl-cloud-download</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-cloud-upload icon nobreak">&nbsp;<code class="small">.sl-cloud-upload</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database icon nobreak">&nbsp;<code class="small">.sl-database</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-lock-unlock icon nobreak">&nbsp;<code class="small">.sl-lock-unlock</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-lock icon nobreak">&nbsp;<code class="small">.sl-lock</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-heart icon nobreak">&nbsp;<code class="small">.sl-heart</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-heart-circle icon nobreak">&nbsp;<code class="small">.sl-heart-circle</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-address icon nobreak">&nbsp;<code class="small">.sl-address</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-cloud-delete icon nobreak">&nbsp;<code class="small">.sl-cloud-delete</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-cloud-checked icon nobreak">&nbsp;<code class="small">.sl-cloud-checked</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-cloud-sync icon nobreak">&nbsp;<code class="small">.sl-cloud-sync</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database-check icon nobreak">&nbsp;<code class="small">.sl-database-check</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database-delete icon nobreak">&nbsp;<code class="small">.sl-database-delete</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-window-code icon nobreak">&nbsp;<code class="small">.sl-window-code</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-network-trio icon nobreak">&nbsp;<code class="small">.sl-network-trio</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-arrow-circle-left icon nobreak">&nbsp;<code class="small">.sl-arrow-circle-left</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-arrow-circle-right icon nobreak">&nbsp;<code class="small">.sl-arrow-circle-right</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-arrow-circle-up icon nobreak">&nbsp;<code class="small">.sl-arrow-circle-up</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-arrow-circle-down icon nobreak">&nbsp;<code class="small">.sl-arrow-circle-down</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-chevron-left icon nobreak">&nbsp;<code class="small">.sl-chevron-left</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-chevron-right icon nobreak">&nbsp;<code class="small">.sl-chevron-right</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-chevron-up icon nobreak">&nbsp;<code class="small">.sl-chevron-up</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-chevron-down icon nobreak">&nbsp;<code class="small">.sl-chevron-down</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-arrow-left icon nobreak">&nbsp;<code class="small">.sl-arrow-left</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-arrow-right icon nobreak">&nbsp;<code class="small">.sl-arrow-right</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-arrow-up icon nobreak">&nbsp;<code class="small">.sl-arrow-up</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-arrow-down icon nobreak">&nbsp;<code class="small">.sl-arrow-down</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database-alert icon nobreak">&nbsp;<code class="small">.sl-database-alert</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database-block icon nobreak">&nbsp;<code class="small">.sl-database-block</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database-lock icon nobreak">&nbsp;<code class="small">.sl-database-lock</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database-sync icon nobreak">&nbsp;<code class="small">.sl-database-sync</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database-setting icon nobreak">&nbsp;<code class="small">.sl-database-setting</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database-edit icon nobreak">&nbsp;<code class="small">.sl-database-edit</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database-minus icon nobreak">&nbsp;<code class="small">.sl-database-minus</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-database-plus icon nobreak">&nbsp;<code class="small">.sl-database-plus</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-upload-drive icon nobreak">&nbsp;<code class="small">.sl-upload-drive</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-download-drive icon nobreak">&nbsp;<code class="small">.sl-download-drive</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-signal-camera icon nobreak">&nbsp;<code class="small">.sl-signal-camera</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-user icon nobreak">&nbsp;<code class="small">.sl-user</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-pencil icon nobreak">&nbsp;<code class="small">.sl-pencil</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-bin icon nobreak">&nbsp;<code class="small">.sl-bin</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-pencil-circle icon nobreak">&nbsp;<code class="small">.sl-pencil-circle</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-zoom-in icon nobreak">&nbsp;<code class="small">.sl-zoom-in</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-zoom-out icon nobreak">&nbsp;<code class="small">.sl-zoom-out</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-upload-arrow icon nobreak">&nbsp;<code class="small">.sl-upload-arrow</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-download-arrow icon nobreak">&nbsp;<code class="small">.sl-download-arrow</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-keyhole icon nobreak">&nbsp;<code class="small">.sl-keyhole</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-link icon nobreak">&nbsp;<code class="small">.sl-link</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-link-broken icon nobreak">&nbsp;<code class="small">.sl-link-broken</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-show icon nobreak">&nbsp;<code class="small">.sl-show</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-hide icon nobreak">&nbsp;<code class="small">.sl-hide</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-folder icon nobreak">&nbsp;<code class="small">.sl-folder</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-duplicate icon nobreak">&nbsp;<code class="small">.sl-duplicate</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-mail icon nobreak">&nbsp;<code class="small">.sl-mail</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-delete icon nobreak">&nbsp;<code class="small">.sl-delete</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-hierarchy icon nobreak">&nbsp;<code class="small">.sl-hierarchy</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-double-down icon nobreak">&nbsp;<code class="small">.sl-double-down</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-double-up icon nobreak">&nbsp;<code class="small">.sl-double-up</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-triangle-down icon nobreak">&nbsp;<code class="small">.sl-triangle-down</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-triangle-up icon nobreak">&nbsp;<code class="small">.sl-triangle-up</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-unfold icon nobreak">&nbsp;<code class="small">.sl-unfold</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-chat-bubble icon nobreak">&nbsp;<code class="small">.sl-chat-bubble</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-minus-circle icon nobreak">&nbsp;<code class="small">.sl-minus-circle</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-add-circle icon nobreak">&nbsp;<code class="small">.sl-add-circle</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-delete-circle icon nobreak">&nbsp;<code class="small">.sl-delete-circle</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-house icon nobreak">&nbsp;<code class="small">.sl-house</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-marker icon nobreak">&nbsp;<code class="small">.sl-marker</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-arrange icon nobreak">&nbsp;<code class="small">.sl-arrange</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-transfer icon nobreak">&nbsp;<code class="small">.sl-transfer</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-script icon nobreak">&nbsp;<code class="small">.sl-script</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-receipt icon nobreak">&nbsp;<code class="small">.sl-receipt</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-bubble-conversation icon nobreak">&nbsp;<code class="small">.sl-bubble-conversation</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-pulse-graph icon nobreak">&nbsp;<code class="small">.sl-pulse-graph</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-heartpulse icon nobreak">&nbsp;<code class="small">.sl-heartpulse</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-pencil-filled icon nobreak">&nbsp;<code class="small">.sl-pencil-filled</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-keyhole-filled icon nobreak">&nbsp;<code class="small">.sl-keyhole-filled</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-star-filled icon nobreak">&nbsp;<code class="small">.sl-star-filled</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-heart-filled icon nobreak">&nbsp;<code class="small">.sl-heart-filled</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-play-filled icon nobreak">&nbsp;<code class="small">.sl-play-filled</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-add-filled icon nobreak">&nbsp;<code class="small">.sl-add-filled</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-minus-filled icon nobreak">&nbsp;<code class="small">.sl-minus-filled</code></span>

      </div>
      <div class="col-lg-2 col-md-4 col-sm-6">
        <span class="sl sl-delete-filled icon nobreak">&nbsp;<code class="small">.sl-delete-filled</code></span>

      </div>
    </div>
  </div>
</article>
